Column footer template
Description
Add summary data to the List control in the column footer.
Discussion
The Column footer template can be used to add information in the footer for a column. The property is available in the List Layout pane for a List with a Columnar layout.
The ability to define column footers is particularly useful when you want to display summary data (such as totals, averages, etc.) at the bottom of a column of data.
For example, in the image below the total for the Quantity column is shown in column footer for the Quantity column.
Column Footer Template Properties
Has fixed column footer?
If checked, adds a fixed footer for the column below the list. A fixed column footer remains on-screen while the list is scrolled.
Number of rows
The number of rows to display in the fixed column footer. Number of rows can be any value between 1 and 5.
HTML for row
The HTML to display in the fixed column footer row. Up to 5 rows can be added to the footer. Each row has a separate HTML for row property defining the content to display. The HTML can include summary field values.
Has data column footer?
If checked, adds a footer for the column to the bottom of the list. A data column footer is shown at the bottom of the list after the last row of data.
Data footer template
The HTML to display in the data footer. The template can include summary field values.
Client-side vs Server-side Summary Values
Server-side summary values are only available if the List is populated using a SQL data source. The server-side summary values are computed as part of the List query. For example, if a List query returns 1,000 rows, but your List is paginated and it only shows 10 rows at a time, the summary value is for all 1,000 rows in the List. Performing a client-side filter on the List has no effect on the summary value. On the other hand, performing a server-side filter on the List will affect the summary value.
Client-side summary values are computed on the visible rows in the List. So, for example, if your List query returns 1,000 rows, but your List is paginated and it only shows 10 rows at a time, the client-side summary will summarize the 10 visible rows.
Adding Summary Values to a Column Footer
Summary values can be inserted into the footer template using the Insert summary field value link. The link displays a menu with the available fields that have server-side or client-side summary values. Select the field that contains the summary value, then choose the type of summary value to insert.
Modifying Summary Values Before Displaying Them
Summary computations can be accessed in the afterClientSideSummaryCompute or afterServerSideSummaryCompute List event. This event can be used to populate another control in the UX with the summary data or change the value(s) before they're displayed in the column footer template.
If you modify the summary value in the summary compute events to add HTML or other non-numeric data, the values cannot be used with Format Directives.
Videos
Displaying Summary Values in Column Footers
In some applications you might want to compute summary values (e.g. count, total, average, etc.) for data in a List column and then display that data below the last row of data in that column.
In this video we show how this is done.